<template>
  <div class="diaodu">
    <div id="cesiumContainer"></div>
    <div class="searchDiv">
      <div class="jieDiv">
        <el-checkbox-group v-model="selectedOptions" @change="handleSelectionChange">
          <el-checkbox label="0"><img class="imgStyle" src="../../assets/images/hongjian.png" alt=""> <span class="colorSpan">调度未开始</span></el-checkbox>
          <el-checkbox label="1"><img class="imgStyle" src="../../assets/images/chengjian.png" alt=""><span class="colorSpan">调度进行中</span></el-checkbox>
          <el-checkbox label="2"><img class="imgStyle" src="../../assets/images/lvjian.png" alt=""><span class="colorSpan">调度已完成</span></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="waringStyle">
        <span>
          当前任务：
        </span>
        <el-checkbox-group v-model="selectedTasks" @change="handleTaskSelectionChange">
          <el-checkbox label="0"><span class="colorSpan">调度：{{ diaoNum }}</span></el-checkbox>
          <el-checkbox label="1"><span class="colorSpan">巡检：{{ xunNum }}</span></el-checkbox>
        </el-checkbox-group>
      </div>

    </div>
    <div class="aslider_s">
      <div class="asliderStyle">
        <div class="cendiv">
          <p><span>当前任务：</span><span>{{param.renwuname}}</span></p>
          <p><span>任务原因：</span><span>{{param.renwuyuan}}</span></p>
          <p><span>任务路线：</span><span>{{param.renwulu}}</span></p>
          <p><span>负责人：</span><span>{{param.renwuren}}</span></p>
          <p><span>任务时间：</span><span>{{param.renwudate}}</span></p>
          <p><span>携带耗材：</span><span>{{param.renwuhao}}</span></p>
          <p><span>任务进度：</span><span>{{param.renwujin}}</span></p>


        </div>
      </div>
    </div>

  </div>
</template>

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
import point from '../../../src/assets/images/icon/point.png'; // 根据实际的文件路径修改引入路径
import car from '../../../src/assets/car.glb'; // 根据实际的文件路径修改引入路径
export default {
  name: "mapz",
  data() {
    return {
      map:null,
      tdtVecLayer:null,
      tdtImgLayer:null,
      wordLayer:null,
      value:'',
      selectedOptions:[],
      selectedTasks:[],
      diaoNum:'22',
      xunNum:'22',
      //建筑物
      stations1:[
        {
          id:'111',
          name:'办公楼',
          type: '1',
          lng:'118.3006295',
          lat:'33.9360111'
        },{
          id:'222',
          name:'鼓风机房',
          type: '2',
          lng:'118.29986859300',
          lat:'33.93606893600'
        },{
          id:'333',
          name:'3#生化池',
          type: '3',
          lng:'118.30045537800',
          lat:'33.93555802100'
        },{
          id:'3331',
          name:'2#生化池',
          type: '3',
          lng:'118.29990101900',
          lat:'33.93552261700'
        },{
          id:'3332',
          name:'1#生化池',
          type: '3',
          lng:'118.2993814',
          lat:'33.9354960'
        },{
          id:'444',
          name:'3#二沉池',
          type: '4',
          lng:'118.30051557800',
          lat:'33.93499185200'
        },{
          id:'4441',
          name:'2#二沉池',
          type: '4',
          lng:'118.2999671',
          lat:'33.9349324'
        },{
          id:'4442',
          name:'1#二沉池',
          type: '4',
          lng:'118.29947796400',
          lat:'33.93493465000'
        },{
          id:'555',
          name:'4#曝气池',
          type: '5',
          lng:'118.30051670300',
          lat:'33.93417290600'
        },{
          id:'666',
          name:'浓缩/匀质池',
          type: '6',
          lng:'118.29973140900',
          lat:'33.93424526600'
        },{
          id:'777',
          name:'脱水机房',
          type: '7',
          lng:'118.29975774700',
          lat:'33.93399788100'
        },{
          id:'888',
          name:'消毒间',
          type: '8',
          lng:'118.29996094400',
          lat:'33.93449002500'
        },{
          id:'999',
          name:'平流沉砂池',
          type: '9',
          lng:'118.29942323500',
          lat:'33.93601853300'
        },{
          id:'1000',
          name:'配电室',
          type: '10',
          lng:'118.29952164500',
          lat:'33.93622756400'
        },{
          id:'1001',
          name:'1#接触池',
          type: '11',
          lng:'118.29949263200',
          lat:'33.93463791800'
        },{
          id:'1002',
          name:'2#接触池',
          type: '11',
          lng:'118.29994829600',
          lat:'33.93466121900'
        },{
          id:'1003',
          name:'3#接触池',
          type: '11',
          lng:'118.30056209700',
          lat:'33.93464167000'
        },
      ],
      param:{
        renwuname:"监测和调整化学加药",
        renwuyuan:"添加凝聚剂",
        renwulu:"调度路线1",
        renwuren:"郭甜",
        renwudate:"2024-01-01",
        renwuhao:"凝聚剂",
        renwujin:"进行中",
      }
    };
  },
  mounted() {
    this.initMap()

  },
  methods: {
    async initMap(){
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      // 创建 Cesium 地球对象
      const viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        // terrain: Cesium.Terrain.fromWorldTerrain(),
        timeline: true,
        animation: false,
        geocoder:false,
      });

      const destination = Cesium.Cartesian3.fromDegrees(118.3033,33.935,300); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(-90); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-45); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      });
      // viewer.imageryLayers.addImageryProvider(
      //   await Cesium.IonImageryProvider.fromAssetId(4),
      // );
      let tileset,tileset1;
      //
      try {
        tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2576239);
        tileset1 = await Cesium.Cesium3DTileset.fromIonAssetId(2566471);
        viewer.scene.primitives.add(tileset);
        viewer.scene.primitives.add(tileset1);
        // await viewer.zoomTo(tileset);
      } catch (error) {
        console.log(error);
      }
// 将地点添加到Cesium地图上
      this.stations1.forEach((station) => {
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat),10);
        viewer.entities.add({
          position: position,
          id: station.id,
          name: station.name,
          type: station.type,
          billboard: {
            // 使用一个简单的图标作为标记
            image: point, // 替换为你的图标路径
            scale: 1.0,
            width: 35,//设置图片大小
            height: 35,//设置图片大小
            show: true,// 是否显示
          },
          label: {
            text: station.name,
            showBackground: true, // 显示背景
            backgroundColor: new Cesium.Color(0.0, 0.5, 0.3, 0.8), // 背景颜色
            font: '16px monospace',
            style: Cesium.LabelStyle.FILL,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置：底部
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
            pixelOffset: new Cesium.Cartesian2(0, -20) // 偏移量，以调整标签位置
          }
        });
      });



      // 创建一个 ColorMaterialProperty 对象表示目标颜色
      const targetColor = new Cesium.ColorMaterialProperty(
        Cesium.Color.fromCssColorString("#00FFFF")
      );

      // 重新定义 positions，包含更多的点，以便小车移动更加平滑
      const positions = [
        Cesium.Cartesian3.fromDegrees(118.300647, 33.936036, 1),
        Cesium.Cartesian3.fromDegrees(118.300647, 33.935947, 1),
        Cesium.Cartesian3.fromDegrees(118.300264, 33.935947, 1),
        Cesium.Cartesian3.fromDegrees(118.300319, 33.934339, 1),
        Cesium.Cartesian3.fromDegrees(118.299814, 33.934322, 1),
      ];

// 创建路径实体
      const pathEntity = viewer.entities.add({
        polyline: {
          positions: positions,
          width: 3,
          material: targetColor,
        },
      });

// 创建轨迹实体
      const trackEntity = viewer.entities.add({
        position: positions[0],
        model: {
          uri: car,
          scale: 0.5,
          minimumPixelSize: 30, // 最小像素大小
          // 其他可选属性，例如颜色、方向等
        },
      });

      let currentIndex = 0;
      let timeElapsed = 0;
      const totalAnimationTime = 50; // 完成整个动画所需的时间（秒）

      function updatePosition() {
        const timeRatio = timeElapsed / totalAnimationTime;
        const startPosition = positions[currentIndex];
        const endPosition = positions[(currentIndex + 1) % positions.length];
        const newPosition = Cesium.Cartesian3.lerp(startPosition, endPosition, timeRatio, new Cesium.Cartesian3());
        trackEntity.position = newPosition;

        // 计算方向
        const direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(endPosition, startPosition, new Cesium.Cartesian3()), new Cesium.Cartesian3());
        const up = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Z); // 假设z轴为向上方向
        const right = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());

        // 计算下一个点相对于当前点的方向向量
        const directionToNextPoint = Cesium.Cartesian3.subtract(endPosition, newPosition, new Cesium.Cartesian3());
        // 计算新的方向角度，并增加 45 度
        const angleAdjustment = Cesium.Math.toRadians(28); // 将 45 度转换为弧度
        const newHeading = Cesium.Math.PI_OVER_TWO - Math.atan2(directionToNextPoint.y, directionToNextPoint.x) + angleAdjustment;

        // 更新方向
        trackEntity.orientation = Cesium.Transforms.headingPitchRollQuaternion(newPosition, new Cesium.HeadingPitchRoll(newHeading, 0, 0));

        timeElapsed += 1;
        if (timeElapsed >= totalAnimationTime) {
          currentIndex++;
          if (currentIndex >= positions.length - 1) {
            currentIndex = 0;
          }
          timeElapsed = 0;
        }
      }

      viewer.clock.onTick.addEventListener(updatePosition);

    },


    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {

    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //任务选择事件
    handleSelectionChange(selectedTasks) {
      console.log("Selected tasks:", selectedTasks);
      // 在这里可以处理用户选择任务后的逻辑，例如更新数据或向后端发送请求
    },
    //任务选择事件
    handleTaskSelectionChange(selectedTasks) {
      console.log("Selected tasks:", selectedTasks);
      // 在这里可以处理用户选择任务后的逻辑，例如更新数据或向后端发送请求
    },

  }
};



</script>

<style scoped lang="scss">
.diaodu{
  position: relative;
  width: 100%;
  height: 100%;
  #cesiumContainer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
  .searchDiv{
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 13%;
    left: 18%;
    z-index: 9999;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .el-select .el-select-dropdown {
      z-index: 9999; /* 设置一个足够高的值 */
    }
    .jieDiv{
      background-color: #004377;
      padding: 0.5rem 1rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      border-radius: 0.3rem;
      .colorSpan{
        color: white;
      }
      :deep(.el-checkbox__label){
        position: relative;
        .imgStyle{
          width: 2rem;
          position: absolute;
          top: -0.1rem;
        }
        span{
          margin-left: 2.5rem;
        }
      }

    }
    .waringStyle{
      background-color: #004377;
      padding: 0.5rem 1rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      border-radius: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        margin-left: 0.5rem;
        color: white;
        cursor: pointer;
      }
      span:nth-of-type(2){
        color: #E6307B;
      }
      span:nth-of-type(3){
        color: #ED6942;
      }
      span:nth-of-type(4){
        color: #00FEB5;
      }
    }

  }
  .aslider_s{
    position: absolute;
    z-index: 333;
    width: 17%;
    height: 98%;
    top: 7%;
    right: 0%;
    background-image: url("../../assets/images/rightBg.png");
    background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
    .asliderStyle{
      font-size: 1rem;
      height: 85%;
      display: flex;
      align-items: center;
      background-image: url("../../assets/images/rightD.png");
      background-size: 100% 100%;
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      margin-top: 3%;
      .cendiv{
        width: 92%;
        height: 100%;
        padding: 1rem 0rem 0rem 2rem;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        p{
          font-family: PingFangSC, PingFang SC;
          color: #FFFFFF;
          span:nth-of-type(1){
            font-size: 1.2rem;
            font-weight: 500;
          }
          span:nth-of-type(2){
            font-size: 1rem;
            font-weight: 400;
          }
        }

      }
    }
  }
}


</style>

